<!--  -->
<template>
<div class=''>
  

<el-row>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-card class="box-card" style="margin-left: 20px;margin-top: 20px;">
  <div slot="header" class="clearfix">
    <span>个人信息</span>
  </div>
  <div class="text item">
    <el-image
      style="width: 120px; height: 120px; border-radius: 50%;margin-left: 70px;"
      :src="stuList[0].stuAvatar"
      fit="fill"></el-image>

      <el-descriptions title="">
    <el-descriptions-item label="姓 名">{{ this.stuList[0].stuName }}</el-descriptions-item>
    
</el-descriptions>

<el-descriptions title="">
    <el-descriptions-item label="学 号">{{ this.stuList[0].stuNumber }}</el-descriptions-item>
    
</el-descriptions>

<el-descriptions title="">
    <el-descriptions-item label="性 别">{{ this.stuList[0].stuGender }}</el-descriptions-item>
    
</el-descriptions>
<el-descriptions title="">
    <el-descriptions-item label="专 业">{{ this.stuList[0].stuMajor }}</el-descriptions-item>
    
</el-descriptions>
<el-descriptions title="">
    <el-descriptions-item label="班 级">{{ this.stuList[0].stuClass }}</el-descriptions-item>
    
</el-descriptions>
<el-descriptions title="">
    <el-descriptions-item label="职 位">{{ this.stuList[0].stuIdentity }}</el-descriptions-item>
    
</el-descriptions>
<el-descriptions title="">
    <el-descriptions-item label="宿舍">{{ this.stuList[0].stuBuilding }}</el-descriptions-item>
    
</el-descriptions>
<el-descriptions title="">
    <el-descriptions-item label="楼 栋">{{ this.stuList[0].stuBuilding }}</el-descriptions-item>
    
</el-descriptions>
<el-descriptions title="">
    <el-descriptions-item label="电话号码">{{ this.stuList[0].stuContantWay }}</el-descriptions-item>
    
</el-descriptions>
  </div>
 
</el-card>
  </div></el-col>
  
  <el-col :span="17" :offset="1"><div class="grid-content bg-purple-light">
    <el-card class="box-card" style="width: 900px;margin-left: 10px;margin-top: 20px;">
  <div slot="header" class="clearfix">
    <span>基础信息</span>
  </div>
  <div class="text item">
    <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="原密码" prop="age">
    <el-input type="text" v-model="form.password4"></el-input>
  </el-form-item>
      <el-form-item label="新密码" prop="pass">
    <el-input type="password" v-model="form.password1" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="form.password2" autocomplete="off"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</el-card>
  </div></el-col>
</el-row>

</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { listStu, getStu, delStu, addStu, updateStu } from "@/api/system/stu";
import Cookies from "js-cookie";
import { updateUserPwd } from "@/api/system/user";

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
  var checkAge = (rule, value, callback) => {
 
        if (!this.form.password4) {
          return callback(new Error('原密码不能为空'));
        }
        console.log(`this.form.password`,this.form.password,this.form.password4 );
        if(this.form.password != this.form.password4){
          return callback(new Error('密码错误不可修改'));
        }
        setTimeout(() => {
          
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
     
        if (this.form.password1 === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        
        if (this.form.password2 === '') {
          callback(new Error('请再次输入密码'));
        } else if (this.form.password2 !== this.form.password1) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
return {
  ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
        // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        stuName: null,
        stuNumber: null,
        stuGender: null,
        stuMajor: null,
        stuClass: null,
        stuIdentity: null,
        stuDormitory: null,
        stuBuilding: null,
        stuContantWay: null
      },
      stuList:[],
      total:null,
      form:{password:null,
        password2:null,
        password1:null,
        password4:null,}
    
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  submitForm(formName) {
  
          updateUserPwd(this.form.password4, this.form.password1).then(response => {
            this.$modal.msgSuccess("修改成功请退出登录");
            this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
          });
     
          this.form.password = this.form.password1
     this.getList()
      },
   
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getList() {
        this.queryParams.stuName = Cookies.get("username")
        this.form.password = Cookies.get("password")
        
      listStu(this.queryParams).then(response => {
       
        this.stuList = response.rows;
        
        this.total = response.total;
      });
    
    }

    
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getList();
   
  },
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 360px;
  }
</style>